<template>
    <div class="menus">
      <ul>
        <li v-for="item in menus" :key="item.id">
          <router-link :to="item.wap_url">
            <img :src="item.pic" alt="" />
            <p>{{ item.name }}</p>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
    props:{
        menus:{
            type:Array
        }
    }
}
</script>

<style lang="scss" scoped>
.menus {
  width: 100%;
  height: 190px;
  ul {
    height: 190px;
    display: flex;
    flex-wrap: wrap;
    li {
      flex-basis: 25%;
      text-align: center;
      a {
        display: block;
        padding: 10px 0;
        box-sizing: border-box;
        height: 100%;
        img {
          width: 40px;
          height: 40px;
          padding-bottom: 5px;
        }
        p {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>